<template>
    <transition enter-active-class="animate__animated animate__bounceInRight animate__fast">
        <div class="server" v-if="isshow">
            <div style="display:flex;">
                <div class="host">
                    <div class="system">
                        <img :src="systemurl" style="margin-right: .5rem;">
                        <div>&nbsp{{data?.host?.platform}}</div>
                    </div>
                    <div class="cpuer">
                        <img :src="cpuurl" style="margin-right:.5rem">
                        <div>&nbsp{{data?.cpu?.info[0].modelName}}</div>
                    </div>
                    <div class="version">
                        <img :src="versionurl" style="margin-right: .5rem;">
                        <div>&nbsp{{data?.host?.hostfamily}}</div>
                    </div>
                </div>
                <div class="memory">
                    <div class="cpp" ref="cppu"></div>
                    <div class="mem" ref="memy"></div>
                </div>
            </div>
            <div class="info">
            <div class="cpuinfo">
            <div style="font-size:1.5rem;font-weight: 550;padding-bottom: 1.3rem;" >CPU信息</div>
            <div class="cpuname" style="padding-bottom:.3rem" >CPU型号：{{data?.cpu.info[0].modelName}}</div>
            <div class="cpubrand" style="padding-bottom:.3rem" >CPU类型：{{data?.cpu.info[0].vendorId}}</div>
            <div class="corenum" style="padding-bottom:.3rem" >核心数：{{data?.cpu.cpucount}}</div>
            </div>

            <div class="meminfo">
            <div style="font-size:1.5rem;font-weight:550;padding-bottom:1.3rem" >内存信息</div>
            <div class="allmem" style="padding-bottom:.3rem" >总内存：{{data?.memory.allmemory}} MB</div>
            <div class="usedmem" style="padding-bottom:.3rem" >使用内存：{{data?.memory.usedmemory}} MB</div>
            <div class="availmem" style="padding-bottom:.3rem" >剩余内存：{{data?.memory.availmemory}} MB</div>
            <div class="mempercent">使用率：{{data?.memory.percent}} %</div>
            </div>

            <div class="hostinfo">
            <div style="font-size:1.5rem;font-weight: 550;padding-bottom: 1.3rem;" >其他信息</div>
            <div class="alldisk" style="padding-bottom:.3rem" >总内存：{{(data?.disk?.total/1024/1024/1024).toFixed(1)}}GB</div>
            <div class="useddisk" style="padding-bottom:.3rem" >已用内存：{{(data?.disk.used/1024/1024/1024).toFixed(1)}}GB</div>
            <div class="availdisk" style="padding-bottom:.3rem" >剩余内存：{{(data?.disk.free/1024/1024/1024).toFixed(1)}}GB</div>
            </div>

            </div>
        </div>
    </transition>
</template>



<script setup lang="ts">
import 'animate.css'
import { Gauge, Liquid, measureTextWidth } from '@antv/g2plot';
import systemurl from '../../assets/svg/system.svg?url'
import versionurl from '../../assets/svg/version.svg?url'
import cpuurl from '../../assets/svg/cpu.svg?url'

const global = getCurrentInstance()
//Flag:动画效果
let isshow = ref<boolean>(false)

//Flag：数据获取
const data = ref()
const getdata = () => {
    global?.proxy?.$axios.get('/v1/hoststatus').then((res: any) => {
        if (res.data.status == 200) {

            data.value = res.data.data
            if (flag) {
                render()
            } else {
                flag = true
            }
        }
    })
}; getdata()
//Flag：渲染
let memy = ref()
let cppu = ref()
let flag = false
onMounted(() => {
    if (flag) {
        render()
    } else {
        flag = true
    }
    isshow.value = true
})
const render = () => {
    if (cppu.value) {
        const cpu = new Gauge(cppu.value, {
            percent: Number(data.value.cpu.usepercent[0].toFixed(1) * 0.01),
            range: {
                color: 'l(0)  0:#B8E1FF  1:#3D76DD',
            },
            startAngle: Math.PI,
            endAngle: 2 * Math.PI,
            //@ts-ignore
            indicator: null,
            statistic: {
                title: {
                    offsetY: -36,
                    style: {
                        fontSize: '36px',
                        color: '#4B535E',
                    },
                    formatter: () => `${data.value.cpu.usepercent[0].toFixed(1)}%`,
                },
                content: {
                    style: {
                        fontSize: '24px',
                        lineHeight: '44px',
                        color: '#4B535E',
                    },
                    formatter: () => 'CPU',
                },
            },
        })
        cpu.render()
    }
    if (memy.value) {
        const mem = new Liquid(memy.value, {
            percent: data.value.memory.percent * 0.01,
            radius: 0.8,
            statistic: {
                title: {
                    formatter: () => '内存',
                    style: ({ percent }) => ({
                        fill: percent > 0.65 ? 'white' : 'rgba(44,53,66,0.85)',
                    }),
                },
                content: {
                    //@ts-ignore
                    style: ({ percent }) => ({
                        fontSize: 36,
                        lineHeight: 1,
                        fill: percent > 0.65 ? 'white' : 'rgba(44,53,66,0.85)',
                    }),
                    //@ts-ignore
                    customHtml: (container, view, { percent }) => {
                        const { width, height } = container.getBoundingClientRect();
                        const d = Math.sqrt(Math.pow(width / 2, 2) + Math.pow(height / 2, 2));
                        const text = `占比 ${(percent * 100).toFixed(0)}%`;
                        const textWidth = measureTextWidth(text, { fontSize: 60 });
                        const scale = Math.min(d / textWidth, 1);
                        return `<div style="width:${d}px;display:flex;align-items:center;justify-content:center;font-size:${scale}em;line-height:${scale <= 1 ? 1 : 'inherit'
                            }">${text}</div>`;
                    },
                },
            }, liquidStyle: ({ percent }) => {
                return {
                    fill: percent > 0.45 ? '#5B8FF9' : '#FAAD14',
                    stroke: percent > 0.45 ? '#5B8FF9' : '#FAAD14',
                };
            },
            color: () => '#5B8FF9',
        })
    mem.render()
    }

}

</script>







<style scoped lang="scss">
.server {
    margin: 0 auto;
    margin-top: 2rem;
    padding-bottom: 1rem;

    .host {
        padding: 1rem;
        box-shadow: 0 2px 4px rgb(5 10 15 / 5%), 0 7px 13px -3px rgb(5 10 15 / 30%);
        height: 20rem;
        max-width: 20rem;
        background-color: white;
        border-radius: .5rem;
        position: relative;

        .system {
            padding-top: 1rem;
            padding-bottom: 2rem;
            display: flex;
            align-items: center;
        }
        .cpuer{
            padding-bottom: 2rem;
            display: flex;
            align-items: center;
        }
        .version {
            display: flex;
            align-items: center;
        }
    }

    .memory {
        padding: 1rem;
        box-shadow: 0 2px 4px rgb(5 10 15 / 5%), 0 7px 13px -3px rgb(5 10 15 / 30%);
        height: 20rem;
        margin-left: 3rem;
        margin-right: 2rem;
        flex-grow: 1;
        background-color: white;
        border-radius: .5rem;
        position: relative;
        display: flex;
        justify-content: space-around;
    }

    .info {
        margin-right: 2rem;
        margin-top: 2rem;
        padding: 1rem;
        box-shadow: 0 2px 4px rgb(5 10 15 / 5%), 0 7px 13px -3px rgb(5 10 15 / 30%);
        height: 15rem;
        background-color: white;
        border-radius: .5rem;
        position: relative;
        display: flex;
        padding-top: 2rem !important;
        .cpuinfo{
            padding-left: 1rem;
            margin-right: 2rem;
        }
        .meminfo{
            padding-right: 3rem;
        }
    }
}
</style>